<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <a-form :model="forms" @submit="handleSubmit">
    <a-tabs class="w-full" default-active-key="1" lazy-load>
        <a-tab-pane key="1" title="基本信息">
          <BasicInfo v-model="forms" />
        </a-tab-pane>
        <a-tab-pane key="2" title="规格/库存">
          <MultiSpec  ref="MultiSpecRef" />
        </a-tab-pane>
        <a-tab-pane key="3" title="详细内容">
          <ma-editor v-model="forms.content" />
        </a-tab-pane>
      </a-tabs>
      <a-form-item>
        <a-button html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import BasicInfo from './components/BasicInfo.vue'
import MultiSpec from './components/MultiSpec.vue'
import useHepler from "@/views/goods/info/hooks/useHelper.js";
import goodsInfo from "@/api/goods/goodsInfo.js";
import {ref} from "vue";
const { formRef, forms, rules } = useHepler()

const MultiSpecRef=ref();
const handleSubmit = (data) => {
  goodsInfo.save({});
  console.log(data);
};
</script>
<style lang="less" scoped>
.grid-demo-background {
  background-image: linear-gradient(90deg,
      var(--color-fill-2) 4.16666667%,
      transparent 4.16666667%,
      transparent 8.33333333%,
      var(--color-fill-2) 8.33333333%,
      var(--color-fill-2) 12.5%,
      transparent 12.5%,
      transparent 16.66666667%,
      var(--color-fill-2) 16.66666667%,
      var(--color-fill-2) 20.83333333%,
      transparent 20.83333333%,
      transparent 25%,
      var(--color-fill-2) 25%,
      var(--color-fill-2) 29.16666667%,
      transparent 29.16666667%,
      transparent 33.33333333%,
      var(--color-fill-2) 33.33333333%,
      var(--color-fill-2) 37.5%,
      transparent 37.5%,
      transparent 41.66666667%,
      var(--color-fill-2) 41.66666667%,
      var(--color-fill-2) 45.83333333%,
      transparent 45.83333333%,
      transparent 50%,
      var(--color-fill-2) 50%,
      var(--color-fill-2) 54.16666667%,
      transparent 54.16666667%,
      transparent 58.33333333%,
      var(--color-fill-2) 58.33333333%,
      var(--color-fill-2) 62.5%,
      transparent 62.5%,
      transparent 66.66666667%,
      var(--color-fill-2) 66.66666667%,
      var(--color-fill-2) 70.83333333%,
      transparent 70.83333333%,
      transparent 75%,
      var(--color-fill-2) 75%,
      var(--color-fill-2) 79.16666667%,
      transparent 79.16666667%,
      transparent 83.33333333%,
      var(--color-fill-2) 83.33333333%,
      var(--color-fill-2) 87.5%,
      transparent 87.5%,
      transparent 91.66666667%,
      var(--color-fill-2) 91.66666667%,
      var(--color-fill-2) 95.83333333%,
      transparent 95.83333333%);
}

.grid-demo .arco-col {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}

.grid-demo .arco-col:nth-child(2n) {
  background-color: rgba(var(--arcoblue-6), 0.9);
}

.grid-demo .arco-col:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}

.form-item-help {
  line-height: 36px;
}
</style>
